DAY6 CSS入門

2023 iThome 鐵人賽

DAY 6

Modern Web

網頁設計之旅系列第 6 篇

15th鐵人賽

y97213h53

團隊NUTC_IMAC_WEB_桑貝比

2023-09-21 22:11:17

164 瀏覽

分享至

CSS主要功能

簡單來說，加上CSS是為了控制HTML中元素的外觀和風格像是字體顏色，大小，元素的邊框、間距、對齊方式等。

該如何開始

首先該寫在哪裡
其實有兩個地方可以寫第一個是在HTML的文檔裡適合剛開始學不需要寫這麼多

第二個是寫在HTML的元素裡面適用於只調整少部分設定且只有一個元素要修改

最後是獨立寫一個CSS檔案，在HTML文本中使用link來套用

選擇器

CSS選擇器是用來指定一個或多個元素而選擇器大致分為三種

元素選擇器
選擇指定的元素的所有實例

p{
color:blue;
}

類別選擇器
選擇擁有特定類別的元素,也就是使用class=""指定

<style>
.test{
}
</style>
<body>
<p class="test">
</body>

ID選擇器
選擇擁有特定ID的元素

<style>
#test{
}
</style>
.
.
.
<body>
<p id="test">
</body>

以下一個例子示範

<style>
p {
    color: red;
}
p.highlighted {
    background-color: yellow;
}
#special-paragraph {
    border: 2px solid blue;
}
</style>
<body>
    <h1>這是一個示例</h1>
    <p class="highlighted">這是一個帶有類別的段落</p>
    <p id="special-paragraph">這是一個帶有ID的段落</p>
    <ul>
        <li>列表項目 1</li>
        <li>列表項目 2</li>
        <li>列表項目 3</li>
    </ul>
</body>